<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>table模块快速使用</title>
	<link rel="stylesheet" href="../libs/layui/css/layui.css">
	<!-- <link rel="stylesheet" href="../css/table.css"> -->
</head>

<body style="height: 100%; width: 100%; background-color: #DEE;">

	<div class="layui-tab-content" style="background-color: #DEE;">
		<div class="layui-row layui-col-space20">
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-header">
						XXX表格(可在头部标题右侧放置编辑按钮)
						<div class="layui-btn-group layui-layout-right" style="margin-right: 10px">
							<button class="layui-btn layui-btn-primary layui-btn-sm">
								<i class="layui-icon">&#xe654;</i>
							</button>
							<button class="layui-btn layui-btn-primary layui-btn-sm">
								<i class="layui-icon">&#xe642;</i>
							</button>
							<button class="layui-btn layui-btn-primary layui-btn-sm">
								<i class="layui-icon">&#xe640;</i>
							</button>
						</div>
					</div>
					<div class="layui-card-body">
						<p>自动渲染</p>
						<table class="layui-table" lay-data="{height:315, url:'/demo/table/user/', page:true, id:'test'}" lay-filter="test">
							<thead>
								<tr>
									<th lay-data="{field:'id', width:80, sort: true}">ID</th>
									<th lay-data="{field:'username', width:80}">用户名</th>
									<th lay-data="{field:'sex', width:80, sort: true}">性别</th>
									<th lay-data="{field:'city'}">城市</th>
									<th lay-data="{field:'sign'}">签名</th>
									<th lay-data="{field:'experience', sort: true}">积分</th>
									<th lay-data="{field:'score', sort: true}">评分</th>
									<th lay-data="{field:'classify'}">职业</th>
									<th lay-data="{field:'wealth', sort: true}">财富</th>
								</tr>
							</thead>
						</table>
						<blockquote class="layui-elem-quote">
							1) 带有 class="layui-table" 的 &lt;table&gt; 标签 <br>
							2) 对标签设置属性 lay-data="" 用于配置一些基础参数 <br>
							3) 在 &lt;th&gt; 标签中设置属性lay-data=""用于配置表头信息 <br>
						</blockquote>

						<br>
						<p>方法级渲染</p>
						<table id="table1" lay-filter="table1"></table>
						<blockquote class="layui-elem-quote">
							创建一个table实例最简单的方式是，<br>
							在页面放置一个元素'&lt;table id="demo"&gt;&lt;/table&gt;'，<br>
							然后通过 table.render() 方法指定该容器
						</blockquote>

						<pre class="layui-code">
							{
								"code":0,
								"msg":"",
								"count":1000,
								"data":[
								{"id":10000,"username":"user-0","sex":"女","city":"城市-0","sign":"签名-0","experience":255,"logins":24,"wealth":82830700,"classify":"作家","score":57},
								{"id":10001,"username":"user-1","sex":"男","city":"城市-1","sign":"签名-1","experience":884,"logins":58,"wealth":64928690,"classify":"词人","score":27},
								{"id":10002,"username":"user-2","sex":"女","city":"城市-2","sign":"签名-2","experience":650,"logins":77,"wealth":6298078,"classify":"酱油","score":31},
								{"id":10003,"username":"user-3","sex":"女","city":"城市-3","sign":"签名-3","experience":362,"logins":157,"wealth":37117017,"classify":"诗人","score":68}
								]
							}
						</pre>

						<br>
						<p>配置说明书</p>
						<table class="layui-table">
							<colgroup>
								<col width="100">
								<col width="100">
								<col>
								<col width="150">
							</colgroup>
							<thead>
								<tr>
									<th>参数</th>
									<th>类型</th>
									<th>说明</th>
									<th>示例值</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>elem</td>
									<td>String/DOM</td>
									<td>指定原始 table 容器的选择器或 DOM，方法渲染方式必填</td>
									<td>"#demo"</td>
								</tr>
								<tr>
									<td>cols</td>
									<td>Array</td>
									<td>设置表头。值是一个二维数组。方法渲染方式必填</td>
									<td><a href="#cols">详见表头参数</a></td>
								</tr>
								<tr>
									<td>url（等）</td>
									<td>-</td>
									<td>异步数据接口相关参数。其中 url 参数为必填项</td>
									<td><a href="#async">详见异步接口</a></td>
								</tr>
								<tr>
									<td>toolbar</td>
									<td>String/DOM/Boolean</td>
									<td class="layui-text">
										<a name="toolbar"> </a> 开启表格头部工具栏区域，该参数支持四种类型值：
										<ul>
											<li>toolbar: '#toolbarDemo' <em>//指向自定义工具栏模板选择器</em></li>
											<li>toolbar: '&lt;div&gt;xxx&lt;/div&gt;' <em>//直接传入工具栏模板字符</em></li>
											<li>toolbar: true <em>//仅开启工具栏，不显示左侧模板</em></li>
											<li>toolbar: 'default' <em>//让工具栏左侧显示默认的内置模板</em></li>
										</ul>
										<div style="color: #FF5722;">
											注意：
											<br>1. 该参数为 layui 2.4.0 开始新增。
											<br>2. 若需要“列显示隐藏”、“导出”、“打印”等功能，则必须开启该参数
										</div>
									</td>
									<td>false</td>
								</tr>
								<tr>
									<td>defaultToolbar</td>
									<td>Array</td>
									<td class="layui-text">
										<a name="defaultToolbar"> </a> 自由配置头部工具栏右侧的图标，数组支持以下可选值：
										<ul>
											<li>filter: <em>显示筛选图标</em></li>
											<li>exports: <em>显示导出图标</em></li>
											<li>print: <em>显示打印图标</em></li>
										</ul>
										<blockquote class="layui-elem-quote layui-quote-nm">
											可根据值的顺序显示排版图标，如：
											<br><em>defaultToolbar: ['filter', 'print', 'exports']</em>
										</blockquote>
										<div style="color: #FF5722;">
											该参数为 layui 2.4.1 新增
										</div>
									</td>
									<td>
										['filter', 'print']
									</td>
								</tr>
								<tr>
									<td>width</td>
									<td>Number</td>
									<td>设定容器宽度。table容器的默认宽度是跟随它的父元素铺满，你也可以设定一个固定值，当容器中的内容超出了该宽度时，会自动出现横向滚动条。</td>
									<td>1000</td>
								</tr>
								<tr>
									<td>height</td>
									<td>Number/String</td>
									<td>设定容器高度</td>
									<td><a href="#height">详见height</a></td>
								</tr>
								<tr>
									<td>cellMinWidth</td>
									<td>Number</td>
									<td>（layui 2.2.1 新增）全局定义所有常规单元格的最小宽度（默认：60），一般用于列宽自动分配的情况。其优先级低于表头参数中的 minWidth</td>
									<td>100</td>
								</tr>
								<tr>
									<td>done</td>
									<td>Function</td>
									<td>数据渲染完的回调。你可以借此做一些其它的操作</td>
									<td><a href="#done">详见done回调</a></td>
								</tr>
								<tr>
									<td>data</td>
									<td>Array</td>
									<td>直接赋值数据。既适用于只展示一页数据，也非常适用于对一段已知数据进行多页展示。</td>
									<td>[{}, {}, {}, {}, …]</td>
								</tr>
								<tr>
									<td>totalRow</td>
									<td>Boolean</td>
									<td>是否开启合计行区域。<span style="color: #FF5722;">layui 2.4.0 新增</span></td>
									<td>false</td>
								</tr>
								<tr>
									<td>page</td>
									<td>Boolean/Object</td>
									<td>开启分页（默认：false） 注：从 layui 2.2.0 开始，支持传入一个对象，里面可包含 <a href="/doc/modules/laypage.html#options">laypage</a> 组件所有支持的参数（jump、elem除外）</td>
									<td>{theme: '#c00'}</td>
								</tr>
								<tr>
									<td>limit</td>
									<td>Number</td>
									<td>每页显示的条数（默认：10）。值务必对应 limits 参数的选项。<br>优先级低于 page 参数中的 limit 参数。</td>
									<td>30</td>
								</tr>
								<tr>
									<td>limits</td>
									<td>Array</td>
									<td>每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。<br>优先级低于 page 参数中的 limits 参数。</td>
									<td>[30,60,90]</td>
								</tr>
								<tr>
									<td>loading</td>
									<td>Boolean</td>
									<td>是否显示加载条（默认：true）。如果设置 false，则在切换分页时，不会出现加载条。该参数只适用于 url 参数开启的方式</td>
									<td>false</td>
								</tr>
								<tr>
									<td>title</td>
									<td>String</td>
									<td>定义 table 的大标题（在文件导出等地方会用到）<span style="color: #FF5722;">layui 2.4.0 新增</span></td>
									<td>"用户表"</td>
								</tr>
								<tr>
									<td>text</td>
									<td>Object</td>
									<td>自定义文本，如空数据时的异常提示等。注：layui 2.2.5 开始新增。</td>
									<td><a href="#text">详见自定义文本</a></td>
								</tr>
								<tr>
									<td>initSort</td>
									<td>Object</td>
									<td>初始排序状态。用于在数据表格渲染完毕时，默认按某个字段排序。注：该参数为 layui 2.1.1 新增</td>
									<td><a href="#initSort">详见初始排序</a></td>
								</tr>
								<tr>
									<td>id</td>
									<td>String</td>
									<td>设定容器唯一ID。注意：从 layui 2.2.0 开始，该参数等价于 &lt;table id="test"&gt;&lt;/table&gt; 中的 id 值。id值是对表格的数据操作方法上是必要的传递条件，它是表格容器的索引。你在下文也将会见识它的存在。</td>
									<td>test</td>
								</tr>
								<tr>
									<td>skin（等）</td>
									<td>-</td>
									<td>设定表格各种外观、尺寸等</td>
									<td><a href="#skin">详见表格风格</a></td>
								</tr>
							</tbody>
						</table>

						<br>
						<p>表头参数一览表</p>
						<table class="layui-table">
							<colgroup>
								<col width="100">
								<col width="100">
								<col>
								<col width="150">
							</colgroup>
							<thead>
								<tr>
									<th>参数</th>
									<th>类型</th>
									<th>说明</th>
									<th>示例值</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>field</td>
									<td>String</td>
									<td>设定字段名。字段名的设定非常重要，且是表格数据列的唯一标识</td>
									<td>username</td>
								</tr>
								<tr>
									<td>title</td>
									<td>String</td>
									<td>设定标题名称</td>
									<td>用户名</td>
								</tr>
								<tr>
									<td>width</td>
									<td>Number/String</td>
									<td>
										设定列宽，若不填写，则自动分配；若填写，则支持值为：数字、百分比
										<br>请结合实际情况，对不同列做不同设定。
									</td>
									<td>200<br>30%</td>
								</tr>
								<tr>
									<td>minWidth</td>
									<td>Number</td>
									<td>局部定义当前常规单元格的最小宽度（默认：60），一般用于列宽自动分配的情况。其优先级高于基础参数中的 cellMinWidth</td>
									<td>100</td>
								</tr>
								<tr>
									<td>type</td>
									<td>String</td>
									<td class="layui-text">
										设定列类型。可选值有：
										<ul>
											<li>normal（常规列，无需设定）</li>
											<li>checkbox（复选框列）</li>
											<li>radio（单选框列，<span style="color:#FF5722;">layui 2.4.0 新增</span>）</li>
											<li>numbers（序号列）</li>
											<li>space（空列）</li>
										</ul>
									</td>
									<td>任意一个可选值</td>
								</tr>
								<tr>
									<td>LAY_CHECKED</td>
									<td>Boolean</td>
									<td>是否全选状态（默认：false）。必须复选框列开启后才有效，如果设置 true，则表示复选框默认全部选中。</td>
									<td>true</td>
								</tr>
								<tr>
									<td>fixed</td>
									<td>String</td>
									<td>固定列。可选值有：<em>left</em>（固定在左）、<em>right</em>（固定在右）。一旦设定，对应的列将会被固定在左或右，不随滚动条而滚动。
										<br> 注意：
										<em>如果是固定在左，该列必须放在表头最前面；如果是固定在右，该列必须放在表头最后面。</em></td>
									<td>left（同 true）<br>right</td>
								</tr>
								<tr>
									<td>hide</td>
									<td>Boolean</td>
									<td>是否初始隐藏列，默认：false。<span style="color:#FF5722;">layui 2.4.0 新增</span></td>
									<td>true</td>
								</tr>
								<tr>
									<td>totalRow</td>
									<td>Boolean</td>
									<td>是否开启该列的自动合计功能，默认：false。<span style="color:#FF5722;">layui 2.4.0 新增</span></td>
									<td>true</td>
								</tr>
								<tr>
									<td>totalRowText</td>
									<td>String</td>
									<td>用于显示自定义的合计文本。<span style="color:#FF5722;">layui 2.4.0 新增</span></td>
									<td>"合计："</td>
								</tr>
								<tr>
									<td>sort</td>
									<td>Boolean</td>
									<td>
										是否允许排序（默认：false）。如果设置 true，则在对应的表头显示排序icon，从而对列开启排序功能。
										<p>
											注意：<em>不推荐对值同时存在“数字和普通字符”的列开启排序，因为会进入字典序比对</em>。比如：<em>'贤心' &gt; '2' &gt; '100'</em>，这可能并不是你想要的结果，但字典序排列算法（ASCII码比对）就是如此。
										</p>
									</td>
									<td>true</td>
								</tr>
								<tr>
									<td>unresize</td>
									<td>Boolean</td>
									<td>
										是否禁用拖拽列宽（默认：false）。默认情况下会根据列类型（type）来决定是否禁用，如复选框列，会自动禁用。而其它普通列，默认允许拖拽列宽，当然你也可以设置 true 来禁用该功能。
									</td>
									<td>false</td>
								</tr>
								<tr>
									<td>edit</td>
									<td>String</td>
									<td>单元格编辑类型（默认不开启）目前只支持：<em>text</em>（输入框）</td>
									<td>text</td>
								</tr>
								<tr>
									<td>event</td>
									<td>String</td>
									<td>自定义单元格点击事件名，以便在 <a href="#ontool">tool</a> 事件中完成对该单元格的业务处理</td>
									<td>任意字符</td>
								</tr>
								<tr>
									<td>style</td>
									<td>String</td>
									<td>自定义单元格样式。即传入 CSS 样式</td>
									<td>background-color: #5FB878; color: #fff;</td>
								</tr>
								<tr>
									<td>align</td>
									<td>String</td>
									<td>单元格排列方式。可选值有：<em>left</em>（默认）、<em>center</em>（居中）、<em>right</em>（居右）</td>
									<td>center</td>
								</tr>
								<tr>
									<td>colspan</td>
									<td>Number</td>
									<td>单元格所占列数（默认：1）。一般用于多级表头</td>
									<td>3</td>
								</tr>
								<tr>
									<td>rowspan</td>
									<td>Number</td>
									<td>单元格所占行数（默认：1）。一般用于多级表头</td>
									<td>2</td>
								</tr>
								<tr>
									<td>templet</td>
									<td>String</td>
									<td>自定义列模板，模板遵循 <a href="/doc/modules/laytpl.html" target="_blank">laytpl</a> 语法。这是一个非常实用的功能，你可借助它实现逻辑处理，以及将原始数据转化成其它格式，如时间戳转化为日期字符等</td>
									<td><a href="#templet">详见自定义模板</a></td>
								</tr>
								<tr>
									<td>toolbar</td>
									<td>String</td>
									<td>绑定列工具条。设定后，可在每行列中出现一些自定义的操作性按钮</td>
									<td><a href="#toolbar">详见列工具条</a></td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script src="../libs/layui/layui.js"></script>
	<script src="../js/table.js"></script>
</body>

</html>
